<template>
    <div class="list-box" v-for="(blog,index) in list " :key="blog._id" >
        <div class="blog-img" v-if="blog.thums" @click="pushDetalist(blog._id)">
            <img :src="base+blog.thums" alt="">
        </div>
        <div class="blog-contianer">
            <div class="blog-title" >
              
              <span class="title" @click="pushDetalist(blog._id)">{{blog.title}}</span>
              <span class="date">发布于 {{getDate(blog.createdAt)}}</span>  
            </div>
           
            <div class="blog-desrition">
                {{
                    blog.descrition
                }}
            </div>
            <div class="blog-push">
                <span @click="clickType(blog.blogType)" class="blog-push-tag">{{blog.blogType}}</span>
                
                <span @click="pushDetalist(blog._id)">阅读全文  &gt;&gt;</span>   
            </div>
        </div>
    </div>
</template>
<script>
import {baseUrl} from "../../config";
import {ref} from "vue";
import {useRouter}from 'vue-router'
import {date} from '../../compostion/useDate'
export default {
    props:{
        list:{
            type:Array,
            default:[]
        }
    },
    setup(pros,cxt){
        const base =ref(baseUrl);
        const router = useRouter();
        const getDate = (d)=>{
            return date(d);
        }
        const clickType = (type)=>{
            cxt.emit("clikeType",type);
        }
        const pushDetalist = (_id)=>{

         
                router.push({
                name:'blogDetalist',
                params:{
                    _id
                }
            });
          
            
           
           

        }

        return{
            base,
            clickType,
            getDate,
            pushDetalist
        }
    }

}
</script>

<style lang="less" scoped>

.list-box{
 width: 100%;
 height: 150px;
 display: flex;
 border-bottom: 1px solid #dde0e7;

 box-sizing: border-box;
 padding:8px 0;
 border-radius:3px;
 .blog-img{
     flex: 0 0 auto ;
     height: 100%;
     width: 120px;
     box-sizing: border-box;
     cursor: pointer;
     img{
         width: 100%;
         height: 100%;
         border-radius: 4px;
     }
 }
 .blog-contianer{
     padding: 5px 10px;
     width: 100%;
     .blog-title{
        height: 40px;
        display: flex;
        justify-content: space-between;
        .title{
         height: 30px;
         font-size: 20px;
         color: #333;
         font-weight: 700;
         cursor: pointer;
         &:hover{
            color: rgb(69, 69, 243);
             }
         }
        
       .date{
           color: #888;
           font-size: 17px;
       }
     }
     
     .blog-desrition{
         color: #888677;
         height: 50%;
         font-size: 14px;
         overflow: hidden;
        
     }
     .blog-push{
          
          width: 100%;
          font-size: 17px;
          display: flex;
          justify-content:space-between;
          .blog-push-tag {
              display: block;
              height: 20px;
              font-size: 13px;
              min-width: 30px;
              text-align: center;
              margin-left: 10px;
              border-radius: 4px;
              line-height: 20px;
              background-color: #e7e5e5;
              color: #999;
             &:hover{
              color: rgb(69, 69, 243);
             }
          }
         span{
             cursor: pointer;
            
             &:hover{
              color: rgb(69, 69, 243);
             }
         }
    }
          
 }

}
</style>